<script setup>
import { ref } from 'vue';

const props = defineProps(['color']);
defineEmits(['update:color']);

const value = ref(props.color);
</script>

<template>
  <label class="color-selector">
    <input type="color" v-model="value" @change="()=> $emit('update:color', value)">
  </label>
</template>

<style>
.color-selector {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 32px;
  border: var(--border);
  border-radius: 4px;
  cursor: pointer;
}

.color-selector > input[type="color"] {
  position: absolute;
  width: 0;
  height: 0;
  visibility: hidden;
}

.color-selector::before {
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 70%;
  height: 70%;
  border-radius: inherit;
  margin: auto;
  background: v-bind(value);
}
</style>
